<template>
    <!--    "消息类型int类型(0:text、1:image、2:voice、3:video、4:music、5:news、6:file)",-->
    <!--    @dblclick.native="showDeleteButton(item.id)"-->
    <div v-if="item.msgType === 0">
        <p class="jim-msg-text-content" v-html="renderTxt(item.content)"/>
    </div>
    <div v-else-if="item.msgType === 1">
        <q-btn flat @click="openImg(item.content.url)">
            <q-img spinner-color="white" :src="item.content.url" class="msg_img"/>
        </q-btn>
    </div>
    <div v-else-if="item.msgType === 2">
        <audio :src="item.content.url" controls="controls" class="msg_voice"/>
    </div>
    <div v-else-if="item.msgType === 3">
        <video class="msg_video" :src="item.content.url" controls/>
    </div>
    <div v-else-if="item.msgType === 4">
        <video class="msg_video" :src="item.content.url" controls/>
    </div>
    <div v-else-if="item.msgType === 5">
        <video class="msg_video" :src="item.content.url" controls/>
    </div>
    <div v-else-if="item.msgType === 6" @click="downLoadFile(item.content.url)">
        <img
                class="msg-file-icon"
                src="../../../statics/icons/Files.png"
        >
        <span class="text-cut text-blue text-italic text-justify text-bold"> {{ item.content.fileName
            }}</span>

    </div>
</template>

<script>
  import emoji from "../../chatEmoji/emoji";
  let time = null;// 用于处理单击与双击的事件
  export default {
    name: "msgContent",
    props: {
      item: {},
    },
    methods: {
      renderTxt (txt = '') {
        const rnTxt = []
        let match = null
        const regex = /(\[.*?\])/g
        let start = 0
        let index = 0
        while ((match = regex.exec(txt))) {
          index = match.index
          if (index > start) {
            rnTxt.push(txt.substring(start, index))
          }
          if (match[1] in emoji.obj) {
            const v = emoji.obj[match[1]]
            rnTxt.push(this.customEmoji(v))
          } else {
            rnTxt.push(match[1])
          }
          start = index + match[1].length
        }
        rnTxt.push(txt.substring(start, txt.length))
        const text = rnTxt.toString().replace(/,/g, '').replace(/base64/g, 'base64,')
        return text
      },
      customEmoji (value) {
        return '<img src="' + require(`../../../statics/faces/${value}`) + '" class="icon_div"/>'
      },
      openImg (url) {// 单击事件函数
        clearTimeout(time) // 首先清除计时器
        time = setTimeout(() => {
          window.open(url)
        }, 300) // 大概时间300ms
      },
      showDeleteButton () { // 双击事件函数，清除计时器，直接处理逻辑
        clearTimeout(time)
        this.$q.dialog({
          title: 'Confirm',
          message: 'Would you like to turn on the wifi?',
          cancel: true,
          persistent: true
        }).onOk(() => {
          // console.log('>>>> OK')
        }).onCancel(() => {
          // console.log('>>>> Cancel')
        }).onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
        })
      },
      downLoadFile (url) {
        this.$q.dialog({
          title: '下载',
          message: '您确定要下载吗？',
          cancel: true,
          ok: '确定',
          // eslint-disable-next-line no-dupe-keys
          cancel: '取消',
          persistent: true
        }).onOk(() => {
          window.open(url)
        })
      },
    }
  }
</script>

<style scoped>
    .msg_img {
        min-height: 160px;
        min-width: 280px;
        max-height: 180px;
        max-width: 320px
    }

    .msg_video {
        z-index: 1;
        min-height: 280px;
        min-width: 160px;
        max-height: 320px;
        max-width: 180px
    }

    .msg_voice {
        max-height: 30px;
        max-width: 290px;
    }

    .msg-file-icon {
        height: 50px;
        width: 50px;
    }
</style>
